<template>
  <div>

    <t-dialog header="登录" width="650px" :visible="props.visible" :footer="null" @close="close">
      <t-layout style="background-color: #fff;">
        <t-aside style="width:200px">
          <t-image src="https://ai.rs888.net/app/assets/nologin_bg.png"></t-image>
          <p>RsCMS</p>
        </t-aside>
        <t-content class="main">
          <wxLogin v-if="loginType===1"></wxLogin>
          <phoneLogin v-if="loginType===2"></phoneLogin>

          <t-footer>
            <t-space class="loginItem">
              登录方式：
              <t-button :theme="loginType===1?'primary':'default'" variant="outline"
                @click="changeLoginType(1)">微信登录</t-button>
              <t-button :theme="loginType===2?'primary':'default'" variant="outline"
                @click="changeLoginType(2)">手机登录</t-button>
            </t-space>
          </t-footer>
        </t-content>

      </t-layout>
    </t-dialog>
  </div>
</template>

<script setup>
  import {
    ref,
    defineProps,
    defineEmits,
    watch
  } from 'vue'

  import phoneLogin from './phoneLogin.vue';
  import wxLogin from './wechatLogin.vue'

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false
    }
  })
  const emits = defineEmits(['onClose'])
  const close = () => {
    emits('onClose')
  }


  const loginType = ref(1)
  const changeLoginType = (type) => {
    loginType.value = type
  }
  watch(()=>loginType.value,
  ()=>{
    console.log('loginType.value',loginType.value)
  })
</script>

<style scoped>
  .main {
    /* height: 260px */
  }


  .loginItem {
    margin-top: 15px;
    align-items: center;
  }
</style>
